<template>
  <!-- <blogCarousel></blogCarousel> -->
  <div class="df jc-sb main-box">
    <div class="blog f1 animate__animated animate__fadeInLeft">
      <div class="media-768 author_box text-color offset-top">
        <img class="author_head" src="@/assets/images/auth.jpg" alt="" />
        <div class="author_img">
          <img class="mine_img" src="@/assets/images/mine.jpg" alt="" />
          <span>fiona的搬砖人de博客</span>
        </div>
        <p class="p15 df jc-c">记录生活和工作</p>
        <div class="df jc-c">
          <el-tooltip :teleported="false" placement="top">
            <template #content>
              <img class="tooltip-img" src="@/assets/images/qq.jpg" alt="" />
            </template>
            <span class="iconfont icon-qq"></span>
          </el-tooltip>
          <el-tooltip :teleported="false" placement="top">
            <template #content>
              <img class="tooltip-img" src="@/assets/images/wx.jpg" alt="" />
            </template>
            <span class="iconfont icon-weixin"></span>
          </el-tooltip>
        </div>
      </div>
      <blogList></blogList>
    </div>
    <div class="author fs-0 text-color animate__animated animate__fadeInRight">
      <div class="search p15">
        <p class="df ai-c text-color text-sm">
          <span class="iconfont icon-sousuo"></span>
          搜索
        </p>
        <div class="mt10 mb10">
          <el-input label="" v-model="search.keyword" placeholder="请输入标题或内容" clearable />
        </div>
        <div class="mb10">
          <el-select
            clearable
            style="width: 100%"
            filterable
            placeholder="请选择分类"
            v-model="search.categoryId"
            :options="categoryList">
            <el-option
              v-for="item in categoryList"
              :key="item.category_id"
              :label="item.name"
              :value="item.category_id" />
          </el-select>
        </div>
        <div>
          <el-button type="primary" :icon="Search" @click="searchFun">查询</el-button>
        </div>
      </div>
      <div class="sticky">
        <div class="author_box offset-top text-color text-base">
          <img class="author_head" src="@/assets/images/auth.jpg" alt="" />
          <div class="author_img">
            <img class="mine_img" src="@/assets/images/mine.jpg" alt="" />
            <span>fiona的搬砖人de博客</span>
          </div>
          <p class="p15 df jc-c">记录生活和工作</p>
          <div class="df jc-c mb10">
            <el-tooltip :teleported="false" placement="top">
              <template #content>
                <img class="tooltip-img" src="@/assets/images/qq.jpg" alt="" />
              </template>
              <span class="iconfont icon-qq"></span>
            </el-tooltip>
            <el-tooltip :teleported="false" placement="top">
              <template #content>
                <img class="tooltip-img" src="@/assets/images/wx.jpg" alt="" />
              </template>
              <span class="iconfont icon-weixin"></span>
            </el-tooltip>
          </div>
        </div>

        <div class="notice p15 offset-top text-color text-sm">
          <p class="df ai-c">
            <span class="iconfont icon-gonggao"></span>
            公告
          </p>
          <p class="mt5">
            源码gitee地址：关注公众号并回复
            <span class="text-color-strong">博客源码</span>
            获取
          </p>
          <div class="gzh mt10 df jc-c">
            <img src="@/assets/images/gzh.jpg" alt="" />
          </div>
        </div>
        <div class="reward p15 offset-top text-color text-sm">
          <p class="df ai-c">
            <span class="iconfont icon-dashang"></span>
            打赏
          </p>
          <div class="df jc-sb">
            <img src="@/assets/images/wxs.jpg" alt="" />
            <img src="@/assets/images/zfbs.jpg" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import blogList from '@/components/blog/blog-list.vue';
  import blogCarousel from '@/components/blog/blog-carousel.vue';
  import { Search } from '@element-plus/icons-vue';
  import { getCategoryList } from '@/apis/category';
  import EventBus from '@/common/EventBus';
  import type { ICategory } from '@/apis/type';

  // 搜索
  // 分类
  let categoryList: Ref<ICategory[]> = ref([]);
  const getCategoryListFun = async () => {
    const res = await getCategoryList();
    if (res.code != 200) return ElMessage.error(res.msg);
    categoryList.value = res.data;
  };
  getCategoryListFun();
  const search = ref({
    keyword: '',
    categoryId: null
  });
  // 事件总线 发送数据
  const searchFun = () => {
    EventBus.emit('searchBlog', search.value);
  };
</script>

<style scoped lang="scss">
  .blog {
    padding-right: 20px;
    min-width: 0;
  }
  @media screen and (max-width: 767px) {
    .blog {
      padding-right: 0;
    }
  }
  .author {
    width: 280px;
    min-height: 100%;
  }
  .author_box {
    border-radius: 10px;
    background: var(--bg-color);
    overflow: hidden;
    .author_head {
      width: 100%;
      height: 120px;
      object-fit: cover;
    }
    .author_img {
      display: flex;
      align-items: center;
      margin-top: -25px;
      padding: 0 15px;
      .mine_img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
      span {
        padding-top: 15px;
        padding-left: 20px;
      }
    }
    .iconfont {
      display: flex;
      align-items: center;
      color: var(--text-color);
      cursor: pointer;
      font-size: 25px;
      margin: 0 10px;
    }
    .icon-weixin {
      font-size: 22px;
    }
  }
  .media-768 {
    display: none;
  }
  @media screen and (max-width: 768px) {
    .author {
      display: none;
    }
    .media-768 {
      display: block;
      margin-bottom: 20px;
    }
    .author_box {
      .author_head {
        height: 100px;
      }
    }
  }

  .tooltip-img {
    width: 100px;
  }
  .author_box,
  .notice,
  .reward {
    background: var(--bg-color);
    border-radius: 10px;
    margin-top: 15px;
  }
  .search {
    background: var(--bg-color);
    border-radius: 10px;
    .el-button {
      width: 100%;
    }
  }
  .sticky {
    position: sticky;
    top: 0;
  }
  .icon-gonggao {
    color: red;
    margin-right: 5px;
  }
  .icon-dashang {
    font-size: 19px;
    color: green;
    margin-right: 5px;
  }
  .icon-sousuo {
    font-size: 19px;
    color: rgb(117, 143, 2);
    margin-right: 5px;
  }
  .reward {
    p {
      margin-bottom: 5px;
    }
    img {
      height: 180px;
      cursor: pointer;
    }
  }
  .gzh {
    img {
      width: 50%;
    }
  }
</style>
